<template>
  <div class="qqMusic fill flex-row" @click="handleQQMusicClick">
    <div class="left flex-shrink-0">
      <ul>
        <li @click="handleNavClick(item)" :class="{active:item.path===path}" v-for="item in navList" :key="item.label">
          {{ item.label }}
        </li>
      </ul>
    </div>
    <div class="right flex-col flex-1">
      <div class="head flex-row items-center justify-between">
        <div class="route">
          <i class="el-icon-arrow-left" @click="handleRouteChange(-1)"/>
          <i class="el-icon-arrow-right" @click="handleRouteChange(1)"/>
        </div>
        <div class="btns flex-row">
          <i class="iconfont icon-zuixiaohua" @click.stop="windowMethods.handleMinimize" @dblclick.stop/>
          <i v-if="!$parent.fullscreen" class="iconfont icon-zuidahua" @click="windowMethods.handleFullScreen"/>
          <i v-else class="iconfont icon-zuidahua1" @click="windowMethods.handleFullScreen"/>
          <i class="iconfont icon-guanbi" @click.stop="windowMethods.handleClose"/>
        </div>
      </div>
      <div class="body flex-1 w-fill">
        <keep-alive>
          <component :key="path" :is="is" :id="id"/>
        </keep-alive>
      </div>
      <div class="foot">
        <NetworkAudioPlayer ref="player"/>
      </div>
    </div>
    <transition name="slide-left">
      <div class="playList flex-col" v-show="showPlayList" ref="playlist">
        <div class="title">播放队列</div>
        <div class="subtitle text-info psb" v-if="asidePlayList.length">{{asidePlayList.length}}首歌曲</div>
        <ul class="li flex-1">
          <li @dblclick="handlePlayListClick(i)" v-for="(item,i) in asidePlayList" :key="i"  class="flex-row items-center justify-between">
            <div>
              <div class="songName flex-row items-end">{{item.songname}}<DanceLine v-if="i===index"/></div>
              <div class="singer mst text-info">
                <span class="singer" v-for="(item, index) in item.singer" :key="index">{{item.name}}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </transition>
  </div>
</template>

<script>
import Recommend from "@/layouts/window/qqMusic/layout/Recommend"
import SongList from "@/layouts/window/qqMusic/layout/SongList"
import Singer from "@/layouts/window/qqMusic/layout/Singer"
import Album from "@/layouts/window/qqMusic/layout/Album"
import NetworkAudioPlayer from "@/layouts/window/audio/NetworkAudioPlayer"
import DanceLine from "@/layouts/window/qqMusic/components/DanceLine"
import His from "@/layouts/window/qqMusic/layout/His"
import LikeSong from "@/layouts/window/qqMusic/layout/LikeSong"
import LoveSinger from "@/layouts/window/qqMusic/layout/LoveSinger"

export default {
  name: "QQMusic",
  props: {
    windowMethods: {}
  },
  components: {DanceLine, NetworkAudioPlayer, Recommend, SongList, Singer, Album, His, LikeSong, LoveSinger},
  data: () => ({
    navList: [
      {label: "推荐", path: "/recommend", icon: "",},
      {label: "关注歌手", path: "/loveSinger", icon: "",},
      {label: "我喜欢", path: "/likeSong", icon: "",},
      {label: "播放历史", path: "/his", icon: "",},
    ],
    path: "/recommend",
    pathStack: [],
    asidePlayList: [],
    showPlayList: false,
    index: 0,
    pathStackIndex: -1,
    isBacking: false,
    is: "",
    id: "",
    currentSong: {}
  }),
  watch: {
    path: {
      immediate: true,
      handler: function (val, oldVal) {
        if (val === oldVal) {
          return
        }
        if (!this.isBacking) {  // 非导航
          // 不处于顶端,点击了新的path
          if (this.pathStackIndex !== this.pathStack.length - 1) {
            this.pathStack = this.pathStack.slice(0, this.pathStackIndex + 1)
          }

          this.pathStack.push(val)
          this.pathStackIndex += 1


        }
        this.isBacking = false
        this.pathParser(val)
      }
    }
  },
  provide() {
    return {
      navigateTo: this.navigateTo,
      getPlayer: () => {
        return this.$refs.player
      },
      setCurrentSong: song => this.currentSong = song,
      setAsidePlayList: list => this.asidePlayList = list,
      setIndex: index => this.index = index,
      setPlayListVisible: flag => this.showPlayList = flag
    }
  },
  methods: {
    navigateTo(path) {
      this.path = path
    },
    handlePlayListClick(i) {
      this.$refs.player.setPlayListIndex(i)
    },
    pathParser(/*String*/path) {
      let arr = path.split("/")
      this.is = arr[1].slice(0, 1).toUpperCase() + arr[1].slice(1)
      this.id = arr.length > 1 ? arr[2] : ""
    },
    handleNavClick(item) {
      this.path = item.path
    },
    handleRouteChange(flag) {
      if (flag === 1 && this.pathStackIndex !== this.pathStack.length - 1) {
        this.isBacking = true
        this.pathStackIndex = this.pathStackIndex + 1
        this.path = this.pathStack[this.pathStackIndex]
      } else if (flag === -1 && this.pathStackIndex !== 0) {
        this.isBacking = true
        this.pathStackIndex = this.pathStackIndex - 1
        this.path = this.pathStack[this.pathStackIndex]
      }

    },
    handleQQMusicClick(e) {
      if(e.path.indexOf(this.$refs.playlist)===-1){
        this.showPlayList = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var";

.qqMusic {
  line-height: 1.1;
  overflow-x: hidden;
  background-color: #22345d;
  user-select: none;
  position: relative;

  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: transparent;
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb{
    background: #626e8d;
  }
}

.left {
  padding: $pn;
  width: 200px;
  background-color: #274d6d;
  color: white;

  ul {
    li {
      cursor: pointer;
      padding: $pn;
      border-radius: 5px;
      margin: $mn 0;

      &:hover {
        background-color: #50647d;
        color: white;
      }

      &.active {
        background-color: #526d88;
        color: white;
      }
    }
  }
}

.right {
  overflow: hidden;
  color: white;

  .head {
    height: 50px;

    .route {
      padding: 0 $pn;
      z-index: 3;

      i {
        margin: 0 $mn;
        cursor: pointer;
      }
    }

    .btns {
      position: absolute;
      right: 0;
      z-index: 3;

      i {
        margin: 0 $mn;
      }
    }
  }

  .body {
    overflow-y: auto;
  }

  .foot {
    height: 80px;
  }
}

.playList{
  transition: all 0.2s;
  overflow: hidden;
  padding-left: $pn;
  color: white;
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
  height: 100%;
  overflow-y: auto;
  z-index: 22;
  background-color: #22345d;
  box-shadow: -3px 0 5px rgba(100,100,200,0.1);
  .title{
    font-weight: 600;
    font-size: $fz-l;
    line-height: 3em;
  }
  ul{
    overflow-y: auto;
    overflow-x: hidden;
    width: 300px;
    li{
      padding: $pn;
      margin: $ms 0;
      &:hover{
        background-color: rgba(0,0,0,0.1);
      }
    }
  }
}

.slide-left-enter{
  width: 0;
}
.slide-left-enter-to{
  width: 300px;
}
.slide-left-leave{
  width: 300px;
}
.slide-left-leave-to{
  width: 0;
}
</style>
